<template>
	<div class="layout">
		<div class="container">
			<div class="logo">
				<image class="logo_img" src="../../static/img/logo.svg" />
			</div>
			<div class="notice">
				<div class="notice_title">
					<div class="title">WELCOME TO THE BIBLEWIN PROJECT</div>
					<div class="title_line"></div>
				</div>
				<div class="note_title">Before proceeding, please read the following carefully:</div>
				<div class="note_desc">This website/project offers a creative AI-based biblical exploration that adopts a “devil’s perspective.”</div>
				<div class="note_desc">It may contain intense negative language and adversarial reasoning.</div>
				<div class="note_desc">The AI may produce errors or inaccuracies.</div>
				<div class="note_desc">It is not intended to replace Christian theology or recognized interpretations of Scripture.</div>
				<div class="note_title">For more details, please refer to the full risk statement.</div>
				<div class="note_title">If you find such content potentially disturbing, please do not proceed further.</div>
				<div class="note_protocol"><div @click="checkHandler('statement')" class="check_btn statement" :class="[{'active': checkObj.statement}]"></div>By checking this box, you acknowledge and accept the above statement. Click “Continue” to enter BibleWin.</div>
				<div class="note_protocol">
					<div @click="checkHandler('policy')" class="check_btn policy" :class="[{'active': checkObj.policy}]"></div>
					<div @click.stop="goPrivacy">(Privacy Policy)</div>
				</div>
				<div class="note_protocol">
					<div @click="checkHandler('agreement')" class="check_btn agreement" :class="[{'active': checkObj.agreement}]"></div>
					<div @click.stop="goAgreement">(User Agreement)</div>
				</div>
			</div>
			<div class="btn">
				<div :class="['sign_btn', {'active': isCheck }]" @click="loginHandler">
					<image class="sign_icon" :src="`../../static/img/signGoogle${isCheck ? 'Active':''}.svg`" />
					<image class="login_icon" src="../../static/img/googleIcon.svg" />
				</div>
					<!-- <div :class="['sign_btn', {'active': isCheck }]" @click="loginHandler">
						<image class="sign_icon" :src="`../../static/img/signGoogle${isCheck ? 'Active':''}.svg`" />
						<image class="login_icon" src="../../static/img/googleIcon.svg" />
					</div>
				</GoogleLogin> -->
			</div>
		</div>
	</div>
</template>

<script setup>
import { computed, reactive, ref, onMounted  } from 'vue';
import { googleTokenLogin } from "vue3-google-login";
import apis from '@/apis/apis';

const checkObj = reactive({
	statement: true,
	policy: true,
	agreement: true,
});
const loading = ref(false);

const isCheck = computed(() => {
	return checkObj.statement && checkObj.policy && checkObj.agreement;
})

const checkHandler = (type) => {
	checkObj[type] = !checkObj[type]
}

const goPrivacy = () => {
	uni.navigateTo({
		url: '/pages/disclaimer/disclaimer'
	})
}

const goAgreement = () => {
	uni.navigateTo({
		url: '/pages/disclaimer/agreement'
	})
}


// 第三方登录
const loginHandler = (provider) =>{
	if (isCheck.value && !loading.value) {
		loading.value = true;
		uni.showLoading({
			mask: true
		})
		googleTokenLogin().then(async (response) => {
			const {data: res } = await apis.google_login({ captcha_code: response.access_token });
	
			if (!res.code) {
				const { data } = res;
				console.log(data);
				loginStore().setLogin(true);
				loginStore().setToken(data.token);
				loginStore().setUid(data.user_info.cuid);
				loginStore().setUserInfo(data.user_info);
				
				uni.hideLoading();
				uni.reLaunch({
					url: '/pages/bible/index'
				})
			}
		}).finally(() => {
			loading.value = false;
		})
	}
}
</script>

<style lang="scss" scoped>
.layout {
	position: relative;
	justify-content: center;
	background: url('../../static/img/bg.jpg') center no-repeat;
	background-size: cover;
	
	&::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.12+100 */
		background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}
}

.container {
	position: relative;
	z-index: 9;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.logo {
	text-align: center;
	
	.logo_img {
		width: 1600upx;
		height: 460upx;
		margin-bottom: 60upx;
	}
}
	
.notice {
	position: relative;
	text-align: center;
	
	max-width: 90%; /* 防止溢出 */
	min-height: 100px; /* 最小高度 */
	background: 
	url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" preserveAspectRatio="none"><path d="M 5,0 L 195,0 A 5 5 0 0 0 200,5 L 200,95 A 5 5 0 0 0 195,100 L 5,100 A 5 5 0 0 0 0,95 L 0,5 A 5 5 0 0 0 5,0 Z" fill="rgba(23, 23, 23, 0.90)" stroke="%23A0865B" stroke-width="1" vector-effect="non-scaling-stroke"/></svg>')
	no-repeat center center / 100% 100%; /* 背景图居中且完全填充 */
	padding: 20px; /* 内边距 */
	margin: 0 auto;
	box-sizing: border-box; /* 内边距不影响宽度 */
	
	.notice_title {
		display: inline-block;
		font-family: 'Aboreto';
		
		.title {
			color: #FFF;
			font-size: 56upx;
			font-weight: 400;
			line-height: 56upx;
			margin: 12upx 0 28upx;
		}
		
		.title_line {
			width: 100%;
			height: 2upx;
			margin-bottom: 32upx;
			background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, #FFF 50%, rgba(255, 255, 255, 0.00) 100%);
		}
	}
	
	.note_title {
		color: #FFF;
		font-size: 36upx;
		font-weight: 500;
		line-height: 44upx;
		text-align: left;
		margin-bottom: 16upx;
	}
	
	.note_desc {
		display: flex;
		align-items: center;
		color: #FFF;
		font-size: 24upx;
		font-weight: 500;
		line-height: 30upx;
		text-align: left;
		margin-bottom: 16upx;
		
		&:before {
			content: '';
			display: inline-block;
			width: 8upx;
			height: 8upx;
			flex-shrink: 0;
			border: 2upx solid #fff;
			margin: 0 12upx;
			transform: rotate(45deg);
		}
	}
	
	.notice_main {
		position: relative;
		z-index: 9;
	}
	
	.notice_bg {
		position: absolute;
		top: 0;
		left: 5%;
		z-index: 1;
		width: 90%;
		height: 100%;
	}
}

.note_protocol {
	display: flex;
	color: #FFF;
	font-size: 22upx;
	font-weight: 500;
	line-height: 30upx;
	text-align: left;
	margin-bottom: 12upx;
	cursor: pointer;
	
	.check_btn {
		position: relative;
		flex-shrink: 0;
		width: 24upx;
		height: 24upx;
		border: 4upx solid #FFD581;
		margin-right: 16upx;
		
		&.active::after {
			content: '';
			display: inline-block;
			width: 16upx;
			height: 16upx;
			margin: 4upx;
			background: #FFD581;
		}
	}
}

.btn {
	text-align: center;
	margin-top: 56upx;
}

.sign_btn {
	display: flex;
	align-items: center;
	width: 840upx;
	height: 54upx;
	margin: 0 auto;
	padding: 16upx 44upx;
	border-radius: 68upx;
	border: 1px solid #bdbdbd;
	background: rgba(0, 0, 0, 0.75);
	border-radius: 34px;
	cursor: not-allowed;
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.75) inset;
	
	&.active {
		border: 1px solid #A0865B;
		cursor: pointer;
		border-radius: 34px;
		background: linear-gradient(90deg, rgba(78, 10, 10, 0.80) 0%, #712323 50%, rgba(78, 10, 10, 0.80) 100%);
	}
	
	.login_icon {
		width: 64upx;
		height: 64upx;
		margin-left: 24upx;
	}
		
	.sign_icon {
		width: 100%;
		height: 100%;
	}
}

/* 响应式：PC端 */
@media (min-width: 1024px) {
	.notice {
		max-width: 1520upx;
		
		.notice_main {
			padding: 32upx 24upx;
			margin: 0 auto;
		}
	}
}

/* 响应式：移动端 */
@media (max-width: 1024px) {
	.logo {
		text-align: center;
		
		.logo_img {
			width: 600upx;
			height: 180upx;
			margin-bottom: 30upx;
		}
	}
	
	.notice {
		max-width: 88%;
		background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 440" preserveAspectRatio="none"><path d="M 10,0 L 330,0 A 10 10 0 0 0 340,10 L 340,430 A 10 10 0 0 0 330,440 L 10,440 A 10 10 0 0 0 0,430 L 0,10 A 10 10 0 0 0 10,0 Z" fill="rgba(23, 23, 23, 0.90)" stroke="%23A0865B" stroke-width="1" vector-effect="non-scaling-stroke"/></svg>') no-repeat center center / 100% 100%;

		.notice_title {
			.title {
				font-size: 44upx;
			}
		}
		
		.note_title {
			font-size: 24upx;
			line-height: 30upx;
		}
		
		.note_desc {
			align-items: flex-start;
			font-size: 20upx;
			line-height: 24upx;
			
			&:before {
				margin-top: 10upx;
			}
		}
	}
	
	.note_protocol {
		font-size: 20upx;
		line-height: 24upx;
		
		.check_btn {
			width: 20upx;
			height: 20upx;
			
			&.active::after {
				width: 12upx;
				height: 12upx;
			}
		}
	}
	
	.sign_btn {
		width: 600upx;
		height: 50upx;
	}
}

/* 更小设备（例如手机） */
@media (max-width: 480px) {

}

</style>